<template>
  <div class="rent-page">
    <van-nav-bar
      title="发布房源"
      left-arrow
      @click-left="$router.push('/home')"
    />
    <div class="rent-info">
      <h3 class="rent-header">房源信息</h3>
      <div class="rent-body">
        <div class="rent-name">
          <div class="rent-line" @click="$router.push({ path: '/areaName' })">
            <div class="rent-context">小区名称</div>
            <div class="rent-extra" v-if="communityName">
              {{ communityName }}
            </div>
            <div v-else class="rent-extra">请输入小区名称</div>
          </div>
        </div>
        <div class="rent-money">
          <span class="left">租&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;金</span>
          <input type="text" placeholder="请输入租金/月" v-model="rentmoney" />
          <span class="right">￥/月</span>
        </div>
        <div class="rent-money">
          <span>建筑面积&nbsp;</span>
          <input type="text" placeholder="请输入租金/月" v-model="rentarea" />
          <span class="right">㎡</span>
        </div>
        <van-field
          class="roomtype"
          input-align="center"
          readonly
          clickable
          name="picker"
          :value="value1"
          label="户型"
          placeholder="请选择>"
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="typeConfirm"
            @cancel="showPicker1 = false"
          />
        </van-popup>
        <van-field
          class="roomtype"
          input-align="center"
          readonly
          clickable
          name="picker"
          :value="value2"
          label="所在楼层"
          placeholder="请选择>"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            @confirm="floorConfirm"
            @cancel="showPicker2 = false"
          />
        </van-popup>
        <van-field
          class="roomtype-last roomtype"
          input-align="center"
          readonly
          clickable
          name="picker"
          :value="value3"
          label="朝向"
          placeholder="请选择>"
          @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            @confirm="directConfirm"
            @cancel="showPicker3 = false"
          />
        </van-popup>
      </div>
      <div class="house-info">
        <h3>房屋标题</h3>
        <input
          v-model="roomName"
          type="text"
          class="house-title"
          placeholder="请输入标题（例如：整租 小区门 2室 5000元）"
        />
        <h3>房屋图像</h3>
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="4"
          class="image"
        />
        <h3>房屋配置</h3>
      </div>
    </div>
    <h3 class="house-desc" title>房屋描述</h3>
    <textarea
      cols="30"
      rows="10"
      placeholder="请输入房屋描述信息"
      v-model="description"
    ></textarea>
    <div class="footer-btns">
      <van-button type="default" class="left" @click="concelFn"
        >取消</van-button
      >
      <van-button type="primary" class="right" @click="addHouse"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
// import HouseEquip from '@/views/HouseEquip.vue'
// import { mapState } from 'vuex'
import { uploadImages, uploadHouses, getHousesParams } from '@/api/user'
import { Dialog, Toast } from 'vant'
export default {
  data () {
    return {
      communityName: this.$route.query.value,
      // community: this.$route.params.community,
      value1: '',
      value2: '',
      value3: '',
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      columns1: ['高楼层', '中楼层', '低楼层'],
      columns2: ['东', '南', '西', '北', '东南', '东北', '西南', '西北'],
      rentmoney: '',
      rentarea: '',
      roomName: '',
      fileList: [],
      description: '',
      dataInfo: ''
    }
  },
  async created () {
    const { body } = await getHousesParams()
    console.log(body)
    this.dataInfo = body
  },
  computed: {
    roomType () {
      return this.dataInfo.roomType.find(item => item.label === this.value1)
        .value
    },
    floor () {
      return this.dataInfo.floor.find(item => item.label === this.value2).value
    },
    oriented () {
      return this.dataInfo.oriented.find(item => item.label === this.value3)
        .value
    }
    // ...mapState(['arr'])
  },
  methods: {
    typeConfirm (value) {
      this.value1 = value
      this.showPicker1 = false
    },
    floorConfirm (value) {
      this.value2 = value
      this.showPicker2 = false
    },
    directConfirm (value) {
      this.value3 = value
      this.showPicker3 = false
    },
    concelFn () {
      Dialog.confirm({
        title: '提示',
        message: '放弃发布房源？',
        confirmButtonText: '继续编辑',
        cancelButtonText: '放弃'
      })
        .then(() => {})
        .catch(() => {
          this.$router.push('/index')
        })
    },
    async addHouse () {
      if (this.fileList.length === 0) return Toast.info('请上传房源图片')
      if (
        !this.communityName &&
        !this.value1 &&
        !this.value2 &&
        !this.value3 &&
        !this.roomName &&
        !this.fileList.length &&
        !this.rentarea
      )
        return Toast.info('内容不能为空')

      // 创建Formdata
      const form = new FormData()
      // 把文件添加到实例上
      this.fileList.forEach(item => form.append('file', item.file))
      const data = await uploadImages(form)
      console.log(data)
      // this.houseImg = data.body.join('|')
      console.log(this.houseImg)

      // const newArr = this.arr.join('|')
      const obj = {
        title: this.roomName,
        description: this.description,
        // supporting: newArr,
        price: this.rentmoney,
        size: this.rentarea,
        houseImg: this.houseImg,
        community: this.community,
        floor: this.floor,
        roomType: this.roomType,
        oriented: this.oriented
      }
      const res = await uploadHouses(obj)
      if (res.status !== 200) return Toast.info('发布失败')
      Dialog.confirm({
        title: '提示',
        message: '发布房源成功！',
        confirmButtonText: '继续发布',
        cancelButtonText: '去查看'
      })
        .then(() => {})
        .catch(() => {
          this.$router.push('/housemanger')
        })
    }
  }
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/deep/.van-nav-bar__content{
  background-color: #1cb676;
}
/deep/.van-nav-bar .van-icon {
    color: #fff;
}
/deep/.van-nav-bar__title{
  color: #fff;
}
.rent-page {
  background-color: #f6f5f6;
  .rent-info {
    background-color: #fff;

    .rent-header {
      font-weight: normal;
      color: #21b97a;
      font-size: 15px;
      padding: 15px 15px 9px;
    }
    .rent-body {
      position: relative;
      border-top: 1px solid #ddd;
      font-size: 14px;
      .rent-name {
        position: relative;
        display: flex;
        margin-left: 15px;
        min-height: 44px;
        vertical-align: middle;
        overflow: hidden;
        transition: background-color 0.2s;
        align-items: center;
        border-bottom: 1px solid #ddd;
        .rent-line {
          // position: relative;
          display: flex;
          padding-right: 15px;
          align-items: center;
          .rent-context {
            color: #666666;
            line-height: 1.5;
            width: 100px;
            padding-top: 7px;
            padding-bottom: 7px;
          }
          .rent-extra {
            color: #888888;
            margin-left: 120px;
            margin-right: 10px;
            line-height: 1.5;
            width: 120px;
            padding-top: 7px;
            padding-bottom: 7px;
            text-align: right;
          }
          .rent-arrow {
            font-size: 20px;
            color: #888888;
          }
        }
      }
      .rent-money {
        display: flex;
        justify-content: space-between;
        color: #666666;
        font-size: 14px;
        height: 44px;
        margin: 0 0 0 15px;
        line-height: 42px;
        border-bottom: 1px solid #ddd;
        .left {
          margin-right: 1.3em;
        }

        input {
          border: none;

          &::placeholder {
            text-indent: 2em;
            color: #bbbbbb;
          }
        }
        .right {
          color: #888888;
          margin-right: 15px;
        }
      }
      .roomtype {
        height: 44px;
        width: 360px;
        line-height: 44px;
        border-bottom: 1px solid #ddd;
        margin-left: 15px;
        // background-color: #fff;

        /deep/.van-field__control {
          &::placeholder {
            text-indent: 175px;
            color: #888888;
          }
        }
      }
      /deep/.van-cell__value {
        width: 100px;
      }
      .roomtype-last {
        border-bottom: none;
      }
    }
  }
  .house-info {
    h3 {
      padding: 15px 15px 9px;
      font-size: 14px;
      color: #333;
      width: 100%;
      font-weight: normal;
      border-bottom: 1px solid #ddd;
      // background-color: #fff;
    }
    .house-title {
      font-size: 14px;
      color: #000;
      width: 100%;
      height: 44px;
      line-height: 44px;
      border: none;
      padding-left: 1em;
      &::placeholder {
        color: #ccc;
      }
    }
    .image {
      margin: 10px 0 10px 10px;
    }
  }
  .house-desc {
    margin-top: 20px;
    padding: 15px 15px 9px;
    font-size: 14px;
    color: #333;
    width: 100%;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
  }
  textarea {
    width: 375px;
    height: 130px;
    padding: 10px 15px;
    border: none;
    margin-bottom: 80px;
    &::placeholder {
      color: #ccc;
      font-size: 14px;
    }
  }
  .footer-btns {
    position: fixed;
    bottom: 0;
    left: 0;
    .left {
      width: 187.5px;
    }
    .right {
      width: 187.5px;
    }
  }
}
/deep/.van-picker__confirm {
  color: #21b97a;
}
</style>
